// 圆形动效模块（优化版）
function initCirclesEffect(canvas) {
    // 获取2D渲染上下文
    const ctx = canvas.getContext('2d');
    const circles = [];
    let time = 0;
    
    // 圆形类型
    const circleTypes = ['solid', 'ring', 'glow', 'gradient'];
    
    // 调色板 - 创建更丰富的颜色方案
    const colorSchemes = [
        { base: 220, range: 60 },  // 蓝紫色系
        { base: 320, range: 40 },  // 粉红色系
        { base: 190, range: 50 },  // 青色系
        { base: 60, range: 30 }    // 黄橙色系
    ];
    
    // 设置多彩渐变背景
    function drawBackground() {
        const gradient = ctx.createRadialGradient(
            canvas.width / 2, canvas.height / 2, 0,
            canvas.width / 2, canvas.height / 2, Math.max(canvas.width, canvas.height)
        );
        
        // 随时间变化的背景色调
        const timeFactor = time * 0.0002;
        const scheme = colorSchemes[Math.floor(time * 0.001) % colorSchemes.length];
        const hue = scheme.base + Math.sin(timeFactor) * scheme.range;
        
        gradient.addColorStop(0, `hsl(${hue}, 40%, 8%)`);
        gradient.addColorStop(0.4, `hsl(${(hue + 30) % 360}, 35%, 5%)`);
        gradient.addColorStop(1, `hsl(${(hue + 60) % 360}, 30%, 2%)`);
        
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }
    
    // 创建圆形
    function createCircle() {
        // 确保最多同时存在15个圆形，优化性能
        if (circles.length < 15) {
            // 选择随机颜色方案
            const scheme = colorSchemes[Math.floor(Math.random() * colorSchemes.length)];
            const hue = scheme.base + (Math.random() - 0.5) * scheme.range;
            const saturation = 60 + Math.random() * 30;
            const lightness = 45 + Math.random() * 20;
            
            // 随机选择圆形类型
            const type = circleTypes[Math.floor(Math.random() * circleTypes.length)];
            
            circles.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                radius: Math.random() * 10 + 5, // 初始半径有差异
                maxRadius: Math.random() * 100 + 60,
                hue: hue,
                saturation: saturation,
                lightness: lightness,
                alpha: 0, // 从透明开始，有淡入效果
                targetAlpha: 0.8 + Math.random() * 0.2,
                growthSpeed: (Math.random() * 0.5 + 0.5) * (type === 'glow' ? 0.7 : 1), // 发光类型生长较慢
                pulsePhase: Math.random() * Math.PI * 2,
                pulseSpeed: Math.random() * 0.03 + 0.01,
                lineWidth: type === 'ring' ? (Math.random() * 3 + 1) : (Math.random() * 1 + 0.5),
                type: type,
                // 添加移动效果
                dx: (Math.random() - 0.5) * 0.5,
                dy: (Math.random() - 0.5) * 0.5,
                // 添加旋转效果（对于渐变类型）
                rotation: Math.random() * Math.PI * 2,
                rotationSpeed: (Math.random() - 0.5) * 0.01,
                // 生命周期
                life: 0,
                maxLife: Math.random() * 1000 + 1500
            });
        }
    }
    
    // 随机创建圆形
    function scheduleNextCircle() {
        createCircle();
        const nextDelay = Math.random() * 1000 + 500;
        setTimeout(scheduleNextCircle, nextDelay);
    }
    
    scheduleNextCircle();
    
    // 绘制不同类型的圆形
    function drawCircle(circle) {
        ctx.save();
        
        // 计算脉冲因子
        const pulseFactor = 1 + 0.15 * Math.sin(circle.pulsePhase);
        const currentRadius = circle.radius * pulseFactor;
        
        // 根据类型绘制圆形
        switch(circle.type) {
            case 'solid':
                // 实心圆形
                ctx.beginPath();
                ctx.arc(circle.x, circle.y, currentRadius, 0, Math.PI * 2);
                ctx.fillStyle = `hsla(${circle.hue}, ${circle.saturation}%, ${circle.lightness}%, ${circle.alpha * 0.7})`;
                ctx.fill();
                
                // 添加边缘光晕
                ctx.beginPath();
                ctx.arc(circle.x, circle.y, currentRadius * 1.1, 0, Math.PI * 2);
                ctx.fillStyle = `hsla(${circle.hue}, ${circle.saturation}%, ${circle.lightness}%, ${circle.alpha * 0.3})`;
                ctx.fill();
                break;
                
            case 'ring':
                // 环形
                ctx.beginPath();
                ctx.arc(circle.x, circle.y, currentRadius, 0, Math.PI * 2);
                ctx.strokeStyle = `hsla(${circle.hue}, ${circle.saturation}%, ${circle.lightness}%, ${circle.alpha})`;
                ctx.lineWidth = circle.lineWidth;
                ctx.stroke();
                
                // 添加内部发光
                ctx.beginPath();
                ctx.arc(circle.x, circle.y, currentRadius * 0.9, 0, Math.PI * 2);
                ctx.strokeStyle = `hsla(${circle.hue}, ${circle.saturation}%, ${circle.lightness}%, ${circle.alpha * 0.6})`;
                ctx.lineWidth = circle.lineWidth * 0.5;
                ctx.stroke();
                break;
                
            case 'glow':
                // 发光圆形
                // 外层光晕
                ctx.beginPath();
                ctx.arc(circle.x, circle.y, currentRadius * 2, 0, Math.PI * 2);
                ctx.fillStyle = `hsla(${circle.hue}, ${circle.saturation}%, ${circle.lightness}%, ${circle.alpha * 0.15})`;
                ctx.fill();
                
                // 中层光晕
                ctx.beginPath();
                ctx.arc(circle.x, circle.y, currentRadius * 1.5, 0, Math.PI * 2);
                ctx.fillStyle = `hsla(${circle.hue}, ${circle.saturation}%, ${circle.lightness}%, ${circle.alpha * 0.25})`;
                ctx.fill();
                
                // 内层圆形
                ctx.beginPath();
                ctx.arc(circle.x, circle.y, currentRadius, 0, Math.PI * 2);
                ctx.fillStyle = `hsla(${circle.hue}, ${circle.saturation}%, ${circle.lightness}%, ${circle.alpha * 0.7})`;
                ctx.fill();
                break;
                
            case 'gradient':
                // 渐变圆形
                ctx.translate(circle.x, circle.y);
                ctx.rotate(circle.rotation);
                
                const gradient = ctx.createLinearGradient(
                    -currentRadius, -currentRadius,
                    currentRadius, currentRadius
                );
                gradient.addColorStop(0, `hsla(${circle.hue}, ${circle.saturation}%, ${circle.lightness}%, ${circle.alpha * 0.8})`);
                gradient.addColorStop(0.5, `hsla(${(circle.hue + 40) % 360}, ${circle.saturation}%, ${circle.lightness}%, ${circle.alpha * 0.5})`);
                gradient.addColorStop(1, `hsla(${(circle.hue + 80) % 360}, ${circle.saturation}%, ${circle.lightness}%, ${circle.alpha * 0.8})`);
                
                ctx.beginPath();
                ctx.arc(0, 0, currentRadius, 0, Math.PI * 2);
                ctx.fillStyle = gradient;
                ctx.fill();
                break;
        }
        
        ctx.restore();
    }
    
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // 绘制背景
        drawBackground();
        
        // 更新和绘制圆形
        for (let i = circles.length - 1; i >= 0; i--) {
            const circle = circles[i];
            
            // 更新生命周期
            circle.life++;
            
            // 淡入效果
            if (circle.life < 100) {
                circle.alpha = circle.targetAlpha * (circle.life / 100);
            } 
            // 淡出效果
            else if (circle.life > circle.maxLife - 100) {
                const fadeProgress = (circle.maxLife - circle.life) / 100;
                circle.alpha = circle.targetAlpha * fadeProgress;
            } else {
                circle.alpha = circle.targetAlpha;
            }
            
            // 更新圆形大小、位置和动画状态
            circle.radius += circle.growthSpeed;
            circle.pulsePhase += circle.pulseSpeed;
            circle.rotation += circle.rotationSpeed;
            
            // 移动圆形
            circle.x += circle.dx;
            circle.y += circle.dy;
            
            // 边界反弹
            if (circle.x - circle.radius < 0 || circle.x + circle.radius > canvas.width) {
                circle.dx = -circle.dx * 0.9; // 能量损失
            }
            if (circle.y - circle.radius < 0 || circle.y + circle.radius > canvas.height) {
                circle.dy = -circle.dy * 0.9; // 能量损失
            }
            
            // 绘制圆形
            drawCircle(circle);
            
            // 移除生命周期结束的圆形
            if (circle.life > circle.maxLife || circle.alpha <= 0) {
                circles.splice(i, 1);
            }
        }
        
        time++;
        requestAnimationFrame(animate);
    }
    
    animate();
}

// 暴露函数到全局作用域
window.initCirclesEffect = initCirclesEffect;